<template>
  <div class="vocabulary-book">

    <div class="content">
      <div v-if="loading" class="loading">
        <el-skeleton :rows="5" animated />
      </div>

      <div v-else-if="error" class="error">
        <el-alert :title="error" type="error" show-icon :closable="false" />
      </div>

      <div v-else>
        <!-- <div class="filters">
          <el-radio-group v-model="filter" @change="loadVocabulary">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button label="favorite">收藏</el-radio-button>
          </el-radio-group>
        </div> -->

        <div v-if="vocabulary.length === 0" class="empty">
          <el-empty description="暂无生词记录" />
        </div>

        <div v-else>
          <!-- 词汇列表 -->
          <el-table :data="vocabulary" style="width: 100%" stripe>
            <el-table-column prop="vocabulary" label="单词" :width="150">
              <template #default="scope">
                <span class="word-link" @click="showWordDetails(scope.row)">
                  {{ scope.row.vocabulary }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="发音">
              <template #default="scope">
                <el-icon v-if="scope.row.pronunciation" size="24" color="#409eff">
                  <VideoPlay @click="playPronunciation(scope.row)" />
                </el-icon>
                <span v-else>N/A</span>
              </template>
            </el-table-column>
            <el-table-column label="音标" v-if="isWideScreen()">
              <template #default="scope">
                <span v-if="scope.row.phonetic" class="phonetic" v-html="getPhonetic(scope.row.phonetic)"></span>
                <span v-else>N/A</span>
              </template>
            </el-table-column>
            <el-table-column label="释义" min-width="200" v-if="isWideScreen()">
              <template #default="scope">
                <div v-if="scope.row.meanings && scope.row.meanings.length > 0">
                  <div v-for="(meaning, index) in scope.row.meanings.slice(0, 2)" :key="index">
                    <span v-if="meaning.partOfSpeech" class="part-of-speech-tag">
                      {{ meaning.partOfSpeech }}
                    </span>
                    <span v-if="meaning.explanations && meaning.explanations.length > 0">
                      {{ meaning.explanations[0] }}
                    </span>
                  </div>
                </div>
                <span v-else>N/A</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="状态" width="120">
              <template #default="scope">
                <el-tag v-if="scope.row.is_favorite" type="warning" size="small">已收藏</el-tag>
                <el-tag v-else type="info" size="small">未收藏</el-tag>
              </template>
            </el-table-column> -->
            <!-- <el-table-column label="遇到次数" width="100" prop="times_encountered"></el-table-column> -->
            <el-table-column label="最后学习" width="120" v-if="isWideScreen()">
              <template #default="scope">
                {{ formatDate(scope.row.last_encountered_at) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template #default="scope">
                <!-- <el-button 
                  :type="scope.row.is_favorite ? 'warning' : 'default'" 
                  size="small"
                  @click="toggleFavorite(scope.row)"
                >
                  {{ scope.row.is_favorite ? '取消收藏' : '收藏' }}
                </el-button> -->
                <el-button type="success" size="small" @click="markAsLearned(scope.row)">
                  学会了
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination">
            <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 50]"
              :total="total" :layout="isWideScreen() ? 'total, sizes, prev, pager, next, jumper' : 'total, prev, next'"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </div>
      </div>
    </div>

    <!-- 单词详情弹窗 -->
    <WordDetailDialog :visible="showWordDetail" :word="selectedWord" @update:visible="showWordDetail = $event"
      @close="closeWordDetail" />
  </div>
</template>

<script>
import vocabularyBookMixin from '@/mixins/vocabularyBook'
import WordDetailDialog from '@/components/vocabulary/WordDetailDialog.vue'
import { ElPageHeader, ElSkeleton, ElAlert, ElRadioGroup, ElRadioButton, ElEmpty, ElTable, ElTableColumn, ElTag, ElButton, ElPagination, ElDialog, ElIcon } from 'element-plus'
import { VideoPlay } from '@element-plus/icons-vue'

export default {
  name: 'VocabularyBook',
  components: {
    ElPageHeader,
    ElSkeleton,
    ElAlert,
    ElRadioGroup,
    ElRadioButton,
    ElEmpty,
    ElTable,
    ElTableColumn,
    ElTag,
    ElButton,
    ElPagination,
    ElDialog,
    ElIcon,
    VideoPlay,
    WordDetailDialog
  },
  mixins: [vocabularyBookMixin]
}
</script>

<style scoped lang="scss">
@use '@/assets/styles/vocabularyBook.scss';
</style>